// 封装兼容性的 addEvent(elem, type, handle) 方法
function addEvent(elem, type, handle) {
  if (elem.addEventListener) {
    elem.addEventListener(type, handle, false);
  } else if (elem.attachEvent) {
    elem.attachEvent("on" + type, function () {
      handle.call(elem);
    });
  } else {
    elem["on" + type] = handle;
  }
}

// 封装取消冒泡的兼容性函数
function stopBubble(event) {
  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  }
}

// use
div.onclick = function (e) {
  stopBubble(e);
};

// 封装阻止默认事件的函数
function cancelHandler(event) {
  if (event.event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }
}

// use
div.addEventListener(
  "click",
  function (e) {
    cancelHandler(e);
  },
  false
);

// 封装div的拖拽方法drag
function drag(ele) {
  let disX, disY;
  console.log(ele);
  ele.addEventListener("mousedown", function (e) {
    e.stopPropagation();
    disX = e.pageX - parseInt(getComputedStyle(ele).left);
    disY = e.pageY - parseInt(getComputedStyle(ele).top);
    const fn = function (e) {
      e.stopPropagation();
      ele.style.left = e.pageX - disX + "px";
      ele.style.top = e.pageY - disY + "px";
    };
    document.addEventListener("mousemove", fn);
    document.addEventListener("mouseup", function (e) {
      document.removeEventListener("mousemove", fn, false);
    });
  });
}
